<template>
	<view class="px-[20rpx] py-[30rpx]">
		<view v-for="(item,index) in props.list" :key="index" class="p-[30rpx] mb-[20rpx] bg-[#fff] rounded-[20rpx]">
			<view class="flex justify-between items-center pb-[25rpx] text-[30rpx]">
				<view class="text-[24rpx] text-[#999]">订单编号：{{item.orderId}}</view>
				<view :style="{'color':item.status == 3 || item.refundStatus ? '#111':'#C01B31' }">{{item.orderStatus}}
				</view>
			</view>
			<van-card>
				<template #thumb>
					<view>
						<van-image radius="10rpx" width="160rpx" height="160rpx" :src="item.orderInfoList[0].image" />
					</view>
				</template>
				<template #title>
					<view class="font-bold text-[30rpx]">{{item.orderInfoList[0].storeName}}</view>
					<view class="pt-[20rpx] text-[30rpx] text-[#999] flex justify-between items-center ">
						<view>￥{{item.orderInfoList[0].price}}</view>
						<view>×{{item.orderInfoList[0].cartNum}}</view>
					</view>
				</template>
			</van-card>
			<view class="pt-[13rpx] flex justify-between items-center">
				<view class="text-center text-[26rpx] text-[#999] mt-[23rpx]">
					共{{item.orderInfoList.length}}件商品
				</view>
				<view>
					<text class="text-[26rpx]">总金额</text>
					<text class="pl-[12rpx] text-[36rpx] font-bold">￥{{item.payPrice}}</text>
				</view>
			</view>
			<view class="flex justify-end items-center pt-[35rpx]">
				<view v-if="(item.status != 0 && item.paid) || item.refundStatus">
					<van-button custom-style="height:70rpx" color="#222222" round plain
						@click="onDelete(item,index)">删除订单</van-button>
				</view>
				<view class="flex justify-start items-center">
					<view class="pl-[20rpx]" v-if="(item.status == 0 && !item.paid)">
						<van-button custom-style="height:70rpx" color="#C01B31" round plain
							@click="onCancel(item)">取消订单</van-button>
					</view>
					<view class="pl-[20rpx]" v-if="item.paid">
						<van-button custom-style="height:70rpx" color="#C01B31" round plain
							@click="toDetail(item.orderId)">查看详情</van-button>
					</view>
				</view>
				<view class="pl-[20rpx]" v-if="item.status != 3 && !item.refundStatus">
					<van-button custom-style="height:70rpx" color="#C01B31" round v-if="!item.paid"
						@click="onPay(item)">立即付款</van-button>
					<van-button custom-style="height:70rpx" color="#C01B31" round
						v-if="item.status == 0 && item.paid">等待配送</van-button>
					<van-button custom-style="height:70rpx" color="#C01B31" round v-if="item.status == 1 "
						@click="onTake(item)">确认收货</van-button>
					<van-button custom-style="height:70rpx" color="#C01B31" round v-if="item.status == 2"
						@click="toComment(item)">待评价</van-button>
				</view>

			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		defineExpose,
		defineEmits
	} from 'vue';
	import {
		mineAPI
	} from '@/api/index.js'

	import {
		orderCreate,
		wechatOrderPay
	} from '@/api/order.js'

	const props = defineProps({
		list: {
			type: Array,
			default: []
		}

	})

	const emits = defineEmits(['onDelete', 'onCancel', 'onTake', 'onPay'])

	const realName = ref('');
	const phone = ref('')

	//删除
	const onDelete = (item, index) => {
		emits('onDelete', {
			item,
			index
		})
	}


	//取消
	const onCancel = (item) => {
		emits('onCancel', item)
	}


	//收货
	const onTake = (item) => {
		emits('onTake', item)
	}

	//评价
	const toComment = (item) => {
		uni.navigateTo({
			url: `/package/sendComment/sendComment?order=${JSON.stringify(item)}`
		})
	}


	//详情页
	const toDetail = (id) => {
		uni.navigateTo({
			url: `/package/orderDetail/orderDetail?id=${id}`
		})
	}

	//立即付款
	const onPay = (item) => {
		console.log(item, 'item');
		emits('onPay', item)
		// wxPay(item)
	}

	defineExpose({

	})
</script>

<style scoped>

</style>